
<template>
  <div>
    <s-form-table :fields="fields"
                  create
                  :createButtonClickHandler="add"
                  ref="table"
                  batchDelete
                  :batchDeleteHandler="batchDelete"
                  :transformParams="transformParams"
                  :getData="getData"
                  :columns="columns">
      <template #actions>
        <a-button size="large"
                  type="primary">下载</a-button>
      </template>
      <template slot="time" slot-scope="{ row }">
        {{ formatTime(row.created) }}
      </template>
      <template slot="row-actions"
                slot-scope="{ row }">
        <a-button type="link"
                  @click="seeDetail(row)">详情</a-button>
        <a-button type="link"
                  @click="edit(row)"
                  v-show="row.finishFlag == false">编辑</a-button>
        <a-popconfirm title="确定删除该巡河任务吗？"
                      ok-text="确定"
                      cancel-text="取消"
                      @confirm.stop="del(row)">
          <a-button type="link">删除</a-button>
        </a-popconfirm>
      </template>
    </s-form-table>
    <add-modal :detail="detail"
               :title="title"
               :refresh="refresh"
               :clearDetail="clearDetail"
               ref="addModal"></add-modal>
    <detail-modal :detail="detail"
                  ref="detailModal"></detail-modal>
  </div>
</template>

<script>
import SFormTable from "@/components/SFormTable";
import addModal from "./addModal";
import detailModal from "./detailModal";
import api from "@/util/api";
import moment from "moment";
import { message } from "ant-design-vue";
export default {
  components: {
    SFormTable,
    addModal,
    detailModal
  },
  filters: {},
  props: {},
  data () {
    return {
      detail: null,
      getUrl: "/api/your-api",
      title: "",
      fields: [
        {
          name: "type",
          placeholder: "任务类型",
          type: "select",
          options: [
            { title: "任务一", value: 1 },
            { title: "任务二", value: 2 },
            { title: "任务三", value: 3 },
          ]
        },
        {
          name: "time",
          showTime: true,
          placeholder: ["开始时间", "结束时间"],
          type: "range"
        }
      ],
      columns: [
        {
          title: "商品ID",
          dataIndex: "id",
          width: "70px",
          fixed: "left",
          align: "center"
        },
        {
          title: "商品标题",
          dataIndex: "title",
          fixed: "left",
          width: "120px",
          align: "left"
        },
        {
          title: "叶子类目",
          dataIndex: "menu",
          width: "120px",
          align: "left"
        },
        {
          title: "卖点",
          dataIndex: "sellPoint",
          width: "120px",
          align: "left"
        },
        {
          title: "已卖数量",
          dataIndex: "sellnum",
          width: "100px",
          align: "left"
        },
        {
          title: "原价",
          dataIndex: "price",
          width: "80px",
          align: "left"
        },
        {
          title: "折扣价",
          dataIndex: "disPrice",
          width: "80px",
          align: "left"
        },
        {
          title: "状态",
          dataIndex: "status",
          width: "80px",
          align: "left"
        },
        {
          title: "创建日期",
          dataIndex: "created",
          slot: "time",
          align: "left"
        },
        {
          title: "更新日期",
          dataIndex: "updated",
          slot: "time",
          align: "left"
        },
        {
          title: "操作",
          dataIndex: "comments",
          align: "center",
          width: "200",
          type: "actions",
          fixed: "right"
        }
      ]
    };
  },
  watch: {
  },
  methods: {
    formatTime(val) {
      return moment(val).format("YYYY-MM-DD HH:mm:ss")
    },
    getData (params) {
      // get { params: {} }
      // post {}
      return new Promise((resolve) => {
        api.get(`/api/disk/list`, { params }).then(res => {
          if (res) {
            resolve({
              page: {
                total: res.total
              },
              data: res.rows
            })
          }
        });
      });
    },
    // 修改默认fields的参数（接口）
    transformParams (params) {
      params.rows = params.pageSize
      return params
    },
    refresh () {
      this.$refs.table.search();
    },
    edit (row) {
      this.getDetail(row);
      this.title = "编辑任务";
      this.$refs.addModal.visible = true;
    },
    del (row) {
      api.delete(`/api/cbb-hzz/patrol-task/${row.id}`).then(() => {
        message.success("删除成功");
        this.refresh();
      });
    },
    batchDelete (val) {
      console.log('批量删除', val);
    },
    add () {
      this.title = "新建任务";
      this.$refs.addModal.visible = true;
    },
    clearDetail () {
      this.detail = null;
    },
    getDetail (val) {
      api.get(`/api/cbb-hzz/patrol-task/${val.id}`).then(res => {
        this.detail = res;
      });
    },
    seeDetail (row) {
      this.getDetail(row);
      this.$refs.detailModal.visible = true;
    }
  }
};
</script>

<style lang="scss" scoped></style>
